<template>
    <transition :name="disableTransitions ? '' : 'fdx-zoom-in-center'">
        <span class="fdx-tag" :class="[
        type ? 'fdx-tag--' + type : '',
        tagSize && `fdx-tag--${tagSize}`,
        {'is-hit': hit}
      ]" :style="{backgroundColor: color}">
            <slot></slot>
            <i class="fdx-tag__close fdx-icon-close" v-if="closable" @click.stop="handleClose"></i>
        </span>
    </transition>
</template>
<script>
export default {
    name: 'Tag',
    props: {
        text: String,
        closable: Boolean,
        type: String,
        hit: Boolean,
        disableTransitions: Boolean,
        color: String,
        size: String
    },
    methods: {
        handleClose(event) {
            this.$emit('close', event)
        }
    },
    computed: {
        tagSize() {
            return this.size || (this.$ELEMENT || {}).size
        }
    }
}
</script>
<style lang="scss">
@import './tag';
</style>
